import React, { Component } from 'react'
import 'antd/dist/antd.css'
import { Carousel } from 'antd'
import axios from 'axios'
import Banner from './Banner'

class Home extends Component {

    state = {
        list: []
    }

    //axios 获取list数据
    componentDidMount() {
        axios.get('/api/list').then((res) => {
            this.setState({
                list: res.data
            })
        })
    }

    render() {
        //从state中结构出list
        let { list } = this.state
        return (
            <div>
                <div className='Top'>
                    <input placeholder='双11预售 定金10倍翻' />
                </div>
                <div className='lbt'>
                    <Carousel autoplay>
                        <div>
                            <h3 style={contentStyle}>1</h3>
                        </div>
                        <div>
                            <h3 style={contentStyle}>2</h3>
                        </div>
                        <div>
                            <h3 style={contentStyle}>3</h3>
                        </div>
                        <div>
                            <h3 style={contentStyle}>4</h3>
                        </div>
                    </Carousel>
                </div>
                <Banner list={list} />
            </div>
        )
    }
}

const contentStyle = {
    height: '160px',
    color: '#fff',
    lineHeight: '160px',
    textAlign: 'center',
    background: '#364d79',
}

export default Home;